<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目健康度分布图表</title>
    <script src="/static/js/echarts.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        .chart-container {
            width: 100%;
            height: 400px;
            margin-bottom: 20px;
        }
        .stats-container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin-top: 30px;
        }
        .stat-item {
            text-align: center;
            padding: 15px;
            min-width: 150px;
        }
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 14px;
            color: #666;
        }
        .excellent { color: #10B981; }
        .good { color: #3B82F6; }
        .average { color: #F59E0B; }
        .at-risk { color: #EF4444; }
        .controls {
            margin-bottom: 20px;
            text-align: center;
        }
        .btn {
            background-color: #3B82F6;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin: 0 5px;
        }
        .btn:hover {
            background-color: #2563EB;
        }
        .project-details {
            margin-top: 40px;
        }
        .project-details h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }
        .tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            border-bottom: 1px solid #eaeaea;
        }
        .tab-btn {
            background: none;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
            color: #666;
            border-bottom: 2px solid transparent;
            transition: all 0.3s;
        }
        .tab-btn.active {
            color: #3B82F6;
            border-bottom-color: #3B82F6;
        }
        .tab-btn:hover {
            color: #3B82F6;
        }
        .tab-content {
            margin-top: 20px;
        }
        .tab-pane {
            display: none;
        }
        .tab-pane.active {
            display: block;
        }
        .project-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        .project-table th, .project-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eaeaea;
        }
        .project-table th {
            background-color: #f9f9f9;
            font-weight: 600;
            color: #333;
        }
        .project-table tr:hover {
            background-color: #f5f5f5;
        }
        .progress-bar {
            width: 100px;
            height: 10px;
            background-color: #eaeaea;
            border-radius: 5px;
            overflow: hidden;
            display: inline-block;
        }
        .progress-fill {
            height: 100%;
            border-radius: 5px;
        }
        .status-badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            color: white;
        }
        .status-excellent {
            background-color: #10B981;
        }
        .status-good {
            background-color: #3B82F6;
        }
        .status-average {
            background-color: #F59E0B;
        }
        .status-at-risk {
            background-color: #EF4444;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>项目健康度分布图表</h1>
            <p>显示所有项目的健康状态分布情况</p>
        </div>
        
        <div class="controls">
            <button class="btn" onclick="refreshChart()">刷新数据</button>
            <button class="btn" onclick="exportChart()">导出图表</button>
        </div>
        
        <div class="chart-container">
            <div id="healthChart"></div>
        </div>
        
        <div class="stats-container">
            <div class="stat-item">
                <div class="stat-value excellent" id="excellent-count">0</div>
                <div class="stat-label">优秀项目</div>
            </div>
            <div class="stat-item">
                <div class="stat-value good" id="good-count">0</div>
                <div class="stat-label">良好项目</div>
            </div>
            <div class="stat-item">
                <div class="stat-value average" id="average-count">0</div>
                <div class="stat-label">一般项目</div>
            </div>
            <div class="stat-item">
                <div class="stat-value at-risk" id="at-risk-count">0</div>
                <div class="stat-label">风险项目</div>
            </div>
            <div class="stat-item">
                <div class="stat-value" id="total-count">0</div>
                <div class="stat-label">项目总数</div>
            </div>
        </div>
        
        <div class="project-details">
            <h2>项目详情</h2>
            <div class="tabs">
                <button class="tab-btn active" data-tab="excellent">优秀项目</button>
                <button class="tab-btn" data-tab="good">良好项目</button>
                <button class="tab-btn" data-tab="average">一般项目</button>
                <button class="tab-btn" data-tab="at-risk">风险项目</button>
            </div>
            
            <div class="tab-content">
                <div id="excellent-tab" class="tab-pane active">
                    <table class="project-table">
                        <thead>
                            <tr>
                                <th>项目名称</th>
                                <th>进度</th>
                                <th>负责人</th>
                                <th>截止日期</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody id="excellent-projects"></tbody>
                    </table>
                </div>
                
                <div id="good-tab" class="tab-pane">
                    <table class="project-table">
                        <thead>
                            <tr>
                                <th>项目名称</th>
                                <th>进度</th>
                                <th>负责人</th>
                                <th>截止日期</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody id="good-projects"></tbody>
                    </table>
                </div>
                
                <div id="average-tab" class="tab-pane">
                    <table class="project-table">
                        <thead>
                            <tr>
                                <th>项目名称</th>
                                <th>进度</th>
                                <th>负责人</th>
                                <th>截止日期</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody id="average-projects"></tbody>
                    </table>
                </div>
                
                <div id="at-risk-tab" class="tab-pane">
                    <table class="project-table">
                        <thead>
                            <tr>
                                <th>项目名称</th>
                                <th>进度</th>
                                <th>负责人</th>
                                <th>截止日期</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody id="at-risk-projects"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 模拟数据 - 在实际应用中，这些数据应该从API获取
        let healthData = {
            excellent: 15,
            good: 22,
            average: 10,
            at_risk: 5
        };
        
        // 项目详细数据
        let projectDetails = {
            excellent: [
                { name: '电商平台升级', progress: 95, manager: '张三', deadline: '2025-03-15' },
                { name: '客户管理系统', progress: 88, manager: '李四', deadline: '2025-04-20' },
                { name: '移动应用开发', progress: 92, manager: '王五', deadline: '2025-03-30' }
            ],
            good: [
                { name: '数据分析平台', progress: 75, manager: '赵六', deadline: '2025-05-10' },
                { name: '供应链优化', progress: 68, manager: '钱七', deadline: '2025-06-15' },
                { name: '官网改版', progress: 72, manager: '孙八', deadline: '2025-04-25' }
            ],
            average: [
                { name: '内部OA系统', progress: 45, manager: '周九', deadline: '2025-07-30' },
                { name: '财务系统升级', progress: 52, manager: '吴十', deadline: '2025-08-15' }
            ],
            at_risk: [
                { name: 'AI客服系统', progress: 25, manager: '郑十一', deadline: '2025-09-20' },
                { name: '数据迁移项目', progress: 30, manager: '陈十二', deadline: '2025-06-30' }
            ]
        };
        
        // 初始化图表
        function initChart() {
            // 使用延迟初始化确保DOM完全加载
            setTimeout(function() {
                console.log('开始初始化健康度图表...');
                const healthCtx = document.getElementById('healthChart');
                console.log('图表容器元素:', healthCtx);
                
                if (healthCtx) {
                    console.log('容器尺寸:', healthCtx.offsetWidth, 'x', healthCtx.offsetHeight);
                    const healthChart = echarts.init(healthCtx);
                    console.log('健康度图表初始化成功');
                    
                    console.log('健康度数据:', healthData);
                    
                    const healthOption = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'horizontal',
                            bottom: 20,
                            left: 'center',
                            data: ['优秀', '良好', '一般', '风险'],
                            textStyle: {
                                fontSize: 12
                            },
                            itemWidth: 16,
                            itemHeight: 16,
                            itemGap: 15,
                            padding: [5, 10]
                        },
                        series: [
                            {
                                name: '项目健康度',
                                type: 'pie',
                                radius: ['30%', '50%'],
                                center: ['50%', '40%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 5,
                                    borderColor: '#fff',
                                    borderWidth: 1
                                },
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    { value: healthData.excellent, name: '优秀', itemStyle: { color: '#10B981' } },
                                    { value: healthData.good, name: '良好', itemStyle: { color: '#3B82F6' } },
                                    { value: healthData.average, name: '一般', itemStyle: { color: '#F59E0B' } },
                                    { value: healthData.at_risk, name: '风险', itemStyle: { color: '#EF4444' } }
                                ]
                            }
                        ]
                    };
                    
                    console.log('图表配置:', healthOption);
                    healthChart.setOption(healthOption);
                    console.log('图表配置已应用');
                    
                    // 响应式调整 - 使用防抖优化
                    let resizeTimer = null;
                    window.addEventListener('resize', function() {
                        clearTimeout(resizeTimer);
                        resizeTimer = setTimeout(function() {
                            healthChart.resize();
                            console.log('图表已调整大小');
                        }, 100);
                    });
                    
                    return healthChart;
                } else {
                    console.error('找不到健康度图表容器元素');
                    return null;
                }
            }, 500); // 延迟500毫秒初始化
        }
        
        // 更新统计数据
        function updateStats() {
            document.getElementById('excellent-count').textContent = healthData.excellent;
            document.getElementById('good-count').textContent = healthData.good;
            document.getElementById('average-count').textContent = healthData.average;
            document.getElementById('at-risk-count').textContent = healthData.at_risk;
            
            const total = healthData.excellent + healthData.good + healthData.average + healthData.at_risk;
            document.getElementById('total-count').textContent = total;
            
            // 更新项目详情表格
            updateProjectTables();
        }
        
        // 更新项目详情表格
        function updateProjectTables() {
            // 渲染优秀项目表格
            renderProjectTable('excellent', projectDetails.excellent, '#10B981');
            
            // 渲染良好项目表格
            renderProjectTable('good', projectDetails.good, '#3B82F6');
            
            // 渲染一般项目表格
            renderProjectTable('average', projectDetails.average, '#F59E0B');
            
            // 渲染风险项目表格
            renderProjectTable('at-risk', projectDetails.at_risk, '#EF4444');
        }
        
        // 渲染单个项目表格
        function renderProjectTable(category, projects, color) {
            const tbody = document.getElementById(`${category}-projects`);
            tbody.innerHTML = '';
            
            projects.forEach(project => {
                const row = document.createElement('tr');
                
                // 项目名称
                const nameCell = document.createElement('td');
                nameCell.textContent = project.name;
                row.appendChild(nameCell);
                
                // 进度
                const progressCell = document.createElement('td');
                const progressBar = document.createElement('div');
                progressBar.className = 'progress-bar';
                
                const progressFill = document.createElement('div');
                progressFill.className = 'progress-fill';
                progressFill.style.width = `${project.progress}%`;
                progressFill.style.backgroundColor = color;
                
                progressBar.appendChild(progressFill);
                progressCell.appendChild(progressBar);
                progressCell.innerHTML += ` ${project.progress}%`;
                row.appendChild(progressCell);
                
                // 负责人
                const managerCell = document.createElement('td');
                managerCell.textContent = project.manager;
                row.appendChild(managerCell);
                
                // 截止日期
                const deadlineCell = document.createElement('td');
                deadlineCell.textContent = project.deadline;
                row.appendChild(deadlineCell);
                
                // 状态
                const statusCell = document.createElement('td');
                const statusBadge = document.createElement('span');
                statusBadge.className = `status-badge status-${category}`;
                
                let statusText = '';
                switch(category) {
                    case 'excellent':
                        statusText = '优秀';
                        break;
                    case 'good':
                        statusText = '良好';
                        break;
                    case 'average':
                        statusText = '一般';
                        break;
                    case 'at-risk':
                        statusText = '风险';
                        break;
                }
                
                statusBadge.textContent = statusText;
                statusCell.appendChild(statusBadge);
                row.appendChild(statusCell);
                
                tbody.appendChild(row);
            });
        }
        
        // 初始化标签页功能
        function initTabs() {
            const tabButtons = document.querySelectorAll('.tab-btn');
            
            tabButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const tabId = this.getAttribute('data-tab');
                    
                    // 移除所有活动状态
                    tabButtons.forEach(btn => btn.classList.remove('active'));
                    document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));
                    
                    // 添加当前活动状态
                    this.classList.add('active');
                    document.getElementById(`${tabId}-tab`).classList.add('active');
                });
            });
        }
        
        // 刷新图表数据
        function refreshChart() {
            // 模拟数据刷新 - 在实际应用中，这里应该调用API获取最新数据
            healthData = {
                excellent: Math.floor(Math.random() * 20) + 5,
                good: Math.floor(Math.random() * 25) + 10,
                average: Math.floor(Math.random() * 15) + 5,
                at_risk: Math.floor(Math.random() * 8) + 1
            };
            
            // 重新初始化图表
            const chart = initChart();
            updateStats();
            
            // 显示刷新成功提示
            const btn = event.target;
            const originalText = btn.textContent;
            btn.textContent = '刷新成功';
            btn.style.backgroundColor = '#10B981';
            
            setTimeout(() => {
                btn.textContent = originalText;
                btn.style.backgroundColor = '#3B82F6';
            }, 1500);
        }
        
        // 导出图表
        function exportChart() {
            const chart = echarts.init(document.getElementById('healthChart'));
            const url = chart.getDataURL({
                type: 'png',
                pixelRatio: 2,
                backgroundColor: '#fff'
            });
            
            const a = document.createElement('a');
            a.href = url;
            a.download = '项目健康度分布图表_' + new Date().toLocaleDateString() + '.png';
            a.click();
            
            // 显示导出成功提示
            const btn = event.target;
            const originalText = btn.textContent;
            btn.textContent = '导出成功';
            btn.style.backgroundColor = '#10B981';
            
            setTimeout(() => {
                btn.textContent = originalText;
                btn.style.backgroundColor = '#3B82F6';
            }, 1500);
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initChart();
            updateStats();
            initTabs();
        });
    </script>
</body>
</html>